<template>
	<div class="home">
		<swiper auto loop class="text-scroll" :show-dots="false">
			<swiper-item v-for="(item,index) in banners" :key="index">
				<div class="banner-box">
					<img :src="item" alt="">
				</div>
			</swiper-item>
		</swiper>
		<ul>
			<router-link tag="li" :to="'/newsDetail?id='+item.id" v-for="(item,index) in newsList" :key="index">
				<!--<img :src="item.imgurl" class="list-left" />-->
				<div class="list-right">
					<h4>{{item.title}}</h4>
					<p>{{item.applicationDate}}</p>
				</div>
			</router-link>
		</ul>
	</div>
</template>

<script>
	import { Swiper, SwiperItem } from 'vux'
	import $ from 'jquery';
	export default {
		name: "index",
		components: {
			Swiper,
			SwiperItem
		},
		data() {
			return {
				banners: [
					require('../../assets/img/banner1.jpg')
				],
				newsList: []
			}
		},
		mounted() {
			this.getNews();
		},
		methods: {
			getNews() {
				this.$http.post('/news/notify/mobile_all_notify_list',{}).then(res=>{
					console.log(res)
					if(res.code == 0){
						this.newsList = res.data
					}
				})
			}
		}
	}
</script>

<style scoped lang="less">
	.home {
		background: white;
		height: 100%;
		overflow: scroll;
		ul {
			padding: 10px 12px;
			li {
				padding: 14px 0;
				border-bottom: 1px solid #eee;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.list-left {
					width: 80px;
					height: 60px;
				}
				.list-right {
					width: 100%;
					/*height: 60px;*/
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					h4 {
						font-size: 14px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						margin-bottom: 10px;
					}
					p{
						color:#999
					}
				}
			}
		}
	}
</style>